<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后花园：CPCC</title>
</head>
<link rel="stylesheet" href="/static/css/layui.css">
<style>
    .layui-row{
        margin-top: 40%;
    }
     h2{
        text-align: center;
        margin-bottom: 1rem;
    }
</style>
<body>
<table id="demo" lay-filter="demo"></table>
<script type="text/html" id="test-table-toolbar-toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
    </div>
</script>
<script type="text/html" id="test-table-toolbar-barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
<script src="/static/layui.js"></script>
<script src="/static/vendor/jquery/jquery-1.12.4.min.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 472
            ,url: '/admin/type' //数据接口
            ,toolbar: '#test-table-toolbar-toolbarDemo'
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:100, sort: true, fixed: 'left'}
                ,{field: 'type', title: 'TYPE', width:200}
                ,{width:215, align:'center', fixed: 'right', toolbar: '#test-table-toolbar-barDemo'}
            ]]

        });

        //头工具栏事件
        table.on('toolbar(demo)', function(obj){
            switch(obj.event){
                case 'add':
                    layer.prompt({
                        formType: 2,
                        title: '反馈类型',
                    }, function(value, index){
                        $.post('{:url("/admin/typeadd")}', {
                                'type': value
                            }
                            , function (res) {
                                if (res.code == 1) {
                                    location.reload();
                                    layer.close(index);
                                } else {
                                    layer.msg(res.msg,{icon: 2});
                                }
                            }, 'json');

                    });
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            console.log(data)
            if(obj.event === 'del'){
                layer.confirm('真的删除'+data.type+'吗？', function(index){
                    $.post('{:url("/admin/typedel")}', {
                            'id': data.id
                        }
                        , function (res) {
                            if (res.code == 1) {
                                obj.del();
                                layer.close(index);
                            } else {
                                layer.msg(res.msg,{icon: 2});
                            }
                        }, 'json');
                });
            } else if(obj.event === 'edit'){
                layer.prompt({
                    formType: 2
                    ,value: data.type
                }, function(value, index){
                    $.post('{:url("/admin/typeedit")}', {
                            'id': data.id,
                            'type': value
                        }
                        , function (res) {
                            if (res.code == 1) {
                                obj.update({
                                    type: value
                                });
                                layer.close(index);
                            } else {
                                layer.msg(res.msg,{icon: 2});
                            }
                        }, 'json');

                });
            }
        });
    });
</script>
</html>